<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <h3 class="title">系统注册</h3>
    <el-form-item label="账号" prop="account">
      <el-input v-model="form.account" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="cfpassword">
      <el-input v-model="form.cfpassword" type="password" placeholder="请确认密码"></el-input>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" class="w100p" @click="register">注册</el-button>
    </el-form-item>
  </el-form>
</template>


<script>
export default {
  data() {
    return {
      form: {
        account: "",
        password: "",
        cfpassword: "",
      },
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: ["change", "blur"] },
          { pattern: /^[a-zA-Z]{6,10}$/, message: '用户名由英文字母组成,长度为6~10个字符', trigger: ["change", "blur"] },
        ],
        password: {
          required: true,
          min: 6,
          message: "请输入至少6个字符的密码",
          trigger: ["change", "blur"],
        },
        cfpassword: [
          {
            required: true,
            message: "请确认密码",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              console.log('value', value);
              console.log('this.form.password', this.form.password);
              if (value !== this.form.password) {
                callback(new Error("两次密码输入不一致"));
              } else {
                callback()
              }

            },
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  methods: {
    register() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 接口请求
        }
      })
    }
  }
}
</script>